<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>火车票订单-阿里旅行</title>

    <jsp:include page="common/common.jsp"></jsp:include>
    <link rel="stylesheet" href="/css/comfirmOrder.css">
    <script>
        function age() {
            let passager_amount = $(".passage-info").find("dl").length;
            for (let i = 0; i < passager_amount; i++) {
                $("#passenger" + (i + 1)).text(2018 - parseInt($("#passenger" + (i + 1)).text()) > 18 ? "成年": "未成年");
            }
        }
    </script>
</head>
<body onload="age()">
<div class="header">
    <div class="header-content">
        <h1>
            <a href="//www.fliggy.com" title="飞猪" class="header-logo-link">飞猪</a>
            <s class="header-point"></s><strong class="header-logo-huochepiao">
            <a href="//train.alitrip.com/stsSearch.htm" title="火车票" class="火车票">火车票</a>
        </strong>
            <span class="steps">
                <span class="step" style="background-color: #ccc">1</span><span>填写订单</span>
                <span class="step">2</span><span>确认订单</span>
                <span class="step" style="background-color: #ccc">3</span><span>支付并完成</span>
            </span>

        </h1>
    </div>
</div>
<article>
    <div class="traininfo">
        <div class="bd">
            <table>
                <tbody>
                <tr>
                    <td class="train-depart">
                        <header class="trinfo-head"><span class="station">${orderModel.depStation}</span>
                            <span class="text">出发</span>
                        </header>
                        <div class="date-time clearfix">
                            <div class="date-time-cont clearfix"><span class="date">
                                <fmt:formatDate value="${vehicleModel.depDate}" pattern="yyyy年 MM月 dd日" />
                            </span>
                                <span class="time">${orderModel.depTime}</span>
                            </div>
                        </div>
                    </td>
                    <td class="train-info">
                        <ul class="train-info-list">
                            <li class="train-meta"><span class="train-type">
                                <c:choose>
                                    <c:when test="${vehicleModel.category == 1}">高铁</c:when>
                                    <c:when test="${vehicleModel.category == 2}">新空快速</c:when>
                                </c:choose>
                            </span>
                                <span class="train-num">${orderModel.vehicleNo}</span>
                            </li>
                            <li class="trinfo-sprite trinfo-split"></li>
                            <li class="time-cost"><i class="trinfo-sprite clock-icon"></i>
                                <span>01时54分</span>
                            </li>
                        </ul>
                    </td>
                    <td class="train-arrive">
                        <header class="trinfo-head"><span class="station">${orderModel.arrStation}</span>
                            <span class="text">到达</span>
                        </header>
                        <div class="date-time clearfix">
                            <div class="date-time-cont clearfix"><span class="date"><fmt:formatDate value="${vehicleModel.depDate}" pattern="yyyy年 MM月 dd日" /></span>
                                <span class="time">04:16</span>
                            </div>
                        </div>
                    </td>
                    <td class="seat-type-wrap confirm-info-td">
                        <header class="trinfo-head">座席类型</header>
                        <div class="seat-type-icon confirm-info-cont  clearfix">
                            <span class="trinfo-sprite J_SeatType seat-seat">硬座</span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="seat">
        <div class="confirm-info"><h4 class="title-passage-msg">购票说明</h4>
            <div class="tuigai-tip">
                <ol class="tip-list">
                    <li>请携带购票证件去全国任意车站窗口取票。取票需提前至少半小时。</li>
                    <li>异地取票收费5元/张。代售点取票收费5元/张。二代身份证可免费在取票机取票。</li>
                    <li>取票需要提前至少半小时。</li>
                    <li>购票成功后，可在线申请退票。</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="confirm">
        <div class="confirm-info"><h4 class="title-passage-msg">乘客信息</h4>
            <div class="passage-info clearfix">
                <c:forEach var="passenger" items="${orderModel.passengerModelList}" varStatus="status">
                    <dl class="infos clearfix">
                        <dt class="info-index">${status.index + 1}</dt>
                        <dt>乘客姓名：</dt>
                        <dd class="dd">${passenger.name}</dd>
                        <dt class="dd">证件号码：</dt>
                        <dd class="dd">${passenger.cardNo}</dd>
                        <dt class="dd">证件类型：</dt>
                        <dd class="dd">${passenger.cardType}</dd>
                        <dt class="dd">乘客类型：</dt>
                        <dd class="dd" id="passenger${status.index + 1}"><fmt:formatDate value="${passenger.birth}" pattern="yyyy" /></dd>
                        <dt>乘客生日：</dt>
                        <dd class="dd">${passenger.birth}</dd>
                    </dl>
                </c:forEach>
            </div>
            <h4 class="title-contacter-msg">联系人信息</h4>
            <dl class="contacter clearfix">
                <dt>姓名：</dt>
                <dd>${orderModel.contacts}</dd>
                <dt>手机号码：</dt>
                <dd>${orderModel.tel}</dd>
                <dt>电子邮箱：</dt>
                <dd>${orderModel.email}</dd>
            </dl>
            <h4 class="title-insure">保险信息</h4>
            <dl class="clearfix insure">
                <dt>火车意外险：</dt>
                <dd><p>张彭洋明（0份保险共0元）</p></dd>
                <dt>不需要保险发票</dt>
                <dd><span class="noInvoiceTip">感谢您为环保尽了一份力量</span></dd>
            </dl>
        </div>
        <div class="summary" style="padding-left:50px;margin-top: 50px">
            <p>订单总金额：<span id="summary">¥${orderModel.price / 100}</span></p>
        </div>
        <div class="submit">
            <p style="line-height: 32px">
                <a onclick="alert('ok')"
                   style="padding:7px 50px;background-color: #ff3c00;;cursor: pointer;text-decoration: none;line-height: 32px">
                    <span style="color: #fff;font-size: 12px;font-weight: 400;">提交订单</span>
                </a>
            </p>
            <p><a href="#fillin" class="J_Step_Back step-back">返回修改订单</a></p>
        </div>
    </div>

</article>

</body>
</html>
